﻿<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="author" content="m.ecdrt.com">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
  <meta name="format-detection" content="telephone=no" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  <meta content="false" id="twcClient" name="twcClient" />
  <link rel="apple-touch-icon-precomposed" href="{$shopconfig.logo}" />
  <link rel="shortcut icon" type="image/x-icon" href="{$shopconfig.logo}" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>{$model.productName}</title>
  <link type="text/css" rel="stylesheet" href="/shop/templates/cdrt/css/Details.css" />
  <link rel="stylesheet" type="text/css" href="/shop/templates/cdrt/css/swiper.css" />
  <link type="text/css" rel="stylesheet" href="/shop/templates/cdrt/css/style_1.css">
  <link type="text/css" rel="stylesheet" href="/shop/templates/cdrt/css/comment.css">
  <link rel="stylesheet" type="text/css" href="/css/weui/weui.min.css" />
  <script type="text/javascript" src="/shop/templates/cdrt/js/pz.js"></script>
  <script src="/shop/templates/cdrt/js/jquery-2.0.2.min.js"></script>
  <script type="text/javascript" src="/shop/templates/cdrt/js/zepto.js"></script>
  <script type="text/javascript" src="/shop/templates/cdrt/js/mediav.js"></script>
  <script type="text/javascript">
    $(function () {
      $.getJSON("/shop/shopmgr.ashx?wid={$wid}&openid={$openid}&myact=pcount&v=" + Math.random(), function (res, status) {
        $("#count").text(res.data);
      });
    });

    $(document).ready(function()
    {
      $('.details_sku:last').removeClass('unselected').addClass('selected');
    })

    function setprice(price,stock,index,id){
      $('.details_sku').removeClass('selected').addClass('unselected');
      $('.details_sku:eq('+(index-1)+')').removeClass('unselected').addClass('selected');
      $('#spanprice').html('￥' + price);
      $('#spanstock').html( stock);
      $('#hidsku').val(id);
    }
  </script>
  <style>
    .details_xx {
      padding: 0 10px ;
    }
    .weui_media_desc {
      text-align:left;
    }
    .star-mini {
      text-align: left;
    }
  </style>
</head>
<body>
  <header class="header">
    <span class="fh left"><a href="javascript:history.go(-1);">&nbsp;</a></span>
    商品详情
    <span class="hd_right right">
      <a class="gwc" href="{$carturl}"><span id="count"></span>&nbsp;</a>
      <a class="right_but" href="/shop/navigate.aspx?wid={$wid}&openid={$openid}">&nbsp;</a>
    </span>
  </header>
  <div id="page">
    <div class="main">
      <div class="m_banner">
        <div class="swiper-container">
          <div class="pagination"></div>
          <div class="swiper-wrapper">
            <vt:foreach from="$model.albums" item="albums" index="#.floor">
              <div class="swiper-slide">
                <a href="javascript:void(0);">
                  <img src="{$albums.original_path}" />
                </a>
              </div>
            </vt:foreach>
          </div>
        </div>
      </div>

      <div class="details_text">
        <div class="details_title">{$model.productName} {$model.sku}</div>
        <div class="details_nr">{$model.shortDesc}</div>
        <div class="details_nr">
          <vt:foreach from="$sku" item="sku" index="i">
            <div class="details_sku unselected" onclick="setprice({$sku.price},{$sku.stock},{$i},{$sku.id})">
              <a>{$sku.attributeValue}</a>
            </div>
          </vt:foreach>
        </div>
        <input type="hidden" id="hidsku" value="0">
        <div class="details_jg">
          商城价格：<span id="spanprice" name="{$model.salePrice}">￥{$model.salePrice}</span> 库存数量：<span id="spanstock" name="{$model.stock}" id="stockcount">{$model.stock} </span>
        </div>
        <a class="activemsg" href=""></a>
        <div class="details_nr">
          购买数量：<span class="count_num">
            <a href="javascript:void(0)" id="btnMinus" class="inputcheckbox">-</a>
            <div class="count-input">
              <input type="text" maxlength="2" value="1" id="proCount" readonly="readonly" />
            </div>
            <a href="javascript:void(0)" id="btnAdd" class="inputcheckbox">+</a>
          </span>
          <span class="count-msg" id="stockStatus"></span>
        </div>
      </div>
      <div class="details_kf">
        <!--<a href="javascript:void(0);" id="collect"><span class="micon icon-fav"></span><span id="collectContent">收藏</span></a> -->
        <a href="javascript:void(0);" class="lxkf"><span class="micon icon-contact"></span>联系客服</a>
        <!--&nbsp;&nbsp;&nbsp;&nbsp;分享到:<a href="javascript:void(0);"><span class="micon icon-sina"></span>新浪微博</a><a href="javascript:void(0);"><span class="micon icon-weixin"></span>微信</a>-->
      </div>
      <div class="details_xx">
        <ul>
          <li class="lb1">
            <a href="/shop/detail_list.aspx?wid={$wid}&pid={$model.id}&openid={$openid}&type=1">详细介绍</a>
            <span class="micon icon-right-gray"></span>
          </li>
        </ul>
      </div>
      <div class="details_xx">
        <ul>
          <li class="lb1" id="info">
            <div class="overall">
              <a id="commentCount" href="/shop/product_comments.aspx?wid={$wid}&openid={$openid}&productid={$model.id}">评价(0)</a>
              <span class="micon icon-right-gray">更多</span>
            </div>
          </li>
        </ul>
        <!--<section class="shop-info" id="info"></section>-->
        <div class="weui_panel weui_panel_access">
          <div class="weui_panel_bd" id="list">
          </div>
        </div>
      </div>

      <div class="details_but" style="display: none" id="you">
        <a href="javascript:void(0);" id="buyImmediately">立即购买</a>
        <!--订金尾款、限时抢购、二维码、套装走快捷购物流程-->
        <a href="javascript:void(0);" class="gwc" id="addCart">加入购物车</a>
      </div>
    </div>
    <vt:template id="_bottom" file="_bottom.html" charset="utf-8" />

    <div class="tc2" style="display: none;">
      <div class="kf_top">
        <a href="tel:{$shopconfig.tel}">
          <p class="dh">{$shopconfig.tel}</p>
        </a>
        <p class="tc_cg"></p>
      </div>
      <div class="tc_button">
        <ul>
          <li><a href="tel:{$shopconfig.tel}">拨打咨询</a></li>
          <li><a href="javascript:void(0)" class="lxkf_close">取消</a></li>
        </ul>
      </div>
    </div>

    <script type="text/javascript">

    </script>
  </div>

  <script type="text/x-handlebars-template" id="tpl">
    <div class="overall">
      <a href="javascript:void(0);">评价</a>
      <span class="micon icon-right-gray">{{totalCount}}人评价</span>
    </div>
  </script>
  <script type="text/x-handlebars-template" id="tplComment">
    <div class="weui_panel weui_panel_access" id="page">
      {{#each this}}
      <div class="weui_media_box weui_media_text">
        <div class="weui_cell_bd weui_cell_primary" style="text-align:left;">
          <span class="star-mini" style="text-align:left;" data-score="{{score}}"></span>
        </div>
        <p class="weui_media_desc">{{content}}</p>
        <!--<ul class="weui_media_info">
          <li class="weui_media_info_meta">{{userName}}</li>
          <li class="weui_media_info_meta">{{createTime}}</li>
        </ul>-->
      </div>
      {{/each}}
      <!--<a href="/shop/product_comments.aspx?wid={$wid}&openid={$openid}&productid={$model.id}" class="weui_panel_ft">查看更多</a>-->
    </div>
  </script>

  <script type="text/javascript" src="/shop/templates/cdrt/js/touch.js"></script>
  <script type="text/javascript" src="/shop/templates/cdrt/js/selector.js"></script>
  <script type="text/javascript" src="/shop/templates/cdrt/js/swiper-2.4.js"></script>
  <script type="text/javascript" src="/shop/templates/cdrt/js/util.js"></script>
  <script type="text/javascript" src="/shop/templates/cdrt/js/vue/vue.min.js"></script>
  <script type="text/javascript" src="/shop/templates/cdrt/js/handlebars.js"></script>
  <script type="text/javascript" src="/shop/templates/cdrt/js/raty/jquery.raty.min.js"></script>
  <script type="text/javascript">
    $.fn.raty.defaults.path = '/shop/templates/cdrt/images/';
    $(document).ready(function (e) {
      //购买数量增加或减少
      var doEvent = document.hasOwnProperty("ontouchstart") ? "tap" : "click";
      //减少
      $("#btnMinus").on(doEvent, function () {
        var count = parseInt($("#proCount").val());
        if (count > 1) {
          $("#proCount").val(--count);
        }
      });

      //增加，最多99个
      $("#btnAdd").on(doEvent, function () {
        var count = parseInt($("#proCount").val());
        if (count < 100) {
          $("#proCount").val(++count);
        }
      });

      //手机号校验
      function isMobileNO(mobileNum) {
        var pattern = new RegExp("^((13[0-9])|(14[57])|(15[^4,\\D])|(18[0-9]))\\d{8}$");
        if (!pattern.test(mobileNum)) {
          alert("手机号不正确！");
          return false;
        }
        return true;
      }

      //邮箱校验
      function isEamll(emall) {
        var pattern = new RegExp("^([a-zA-Z0-9]*[-_]?[a-zA-Z0-9]+)*@([a-zA-Z0-9]*[-_]?[a-zA-Z0-9]+)+[\\.][A-Za-z]{2,3}([\\.][A-Za-z]{2})?$");
        if (!pattern.test(emall)) {
          alert("邮箱不正确！");
          return false;
        }
        return true;
      }
    });
  </script>
  <script src="../../../scripts/jquery/jquery.query.js"></script>
  <script type="text/javascript">
    $(".lxkf").click(function () {
      if ($('#load_mask').length) { }
      else {
        var h = $(document.body).height() + "px";
        $("<div id='load_mask' class='tc_zz' style='height:" + h + "' />").appendTo("body");
      }
      $("#load_mask").show();
      var t = $(window).scrollTop(), h = $(window).height(), iTop = 0;
      iTop = ((h - $(".tc2").height()) / 2 + t) + "px";
      $(".tc2").css("top", iTop).show();
    })

    $(".lxkf_close").click(function () {
      $(".tc2").hide();
      $("#load_mask").hide();
    })

    $(document).ready(function () {
      //获取URL参数
      var id = $.query.get("pid");
      checkStock(id)

      //库存校验
      function checkStock(regionId) {
        $.getJSON("/shop/shop.ashx?wid={$wid}&id=" + id + "&myact=checkid", function (d, status) {
          if (typeof (d.data) == "undefined") {
            location.href = "{$indexurl}";
          }
          else if (d.data > 0) {
            hasStock();
            $("#you").css('display', 'block');

          } else if (d.data <= 0) {
            noStock();
            $("#you").hide();
          }
        });
      }

      //有货
      function hasStock() {
        $("#stockStatus").text("");
      }
      //无货
      function noStock() {
        $("#stockStatus").text("无货");
      }

      function buyStockCheck(type)
      {
        var buycount = parseInt($("#proCount").val());
        $.getJSON("/shop/shop.ashx?wid={$wid}&id=" + id + "&myact=checkid", function (d, status) {
          if (typeof (d.data) == "undefined") {
            alert('购买出现问题，请联系管理员。');
          }
          else if (d.data >= buycount) {
            if (type == 'addCart') { addCart();}
            else if (type == 'buyImmediately') { buyImmediately();}
          }
          else if (d.data > 0 && d.data < buycount) {
            $('#stockcount').text(d.data);
            alert('抱歉，所选商品库存不足。');
          }
          else if (d.data <= 0) {
            noStock();
            $("#you").hide();
            alert('抱歉，所选商品库存不足。');
          }
        });
      }

      function addCart()
      {
        var bc = $("#proCount").val();
        var productid = id;
        var skuid = $('#hidsku').val();
        var jiage = $(".details_jg span").attr('name');
        $.getJSON("/shop/shopmgr.ashx?skuid="+skuid+"&wid={$wid}&productid=" + productid + "&bc=" + bc + "&openid={$openid}&attr=" + "" + "&totprice=" + jiage + "&myact=addCart&v=" + Math.random(), function (d, status) {
          if (d.errCode == "0") {
            location.href = "{$carturl}" + "&rtn=shop";
          } else {
            alert("购物车添加失败");
          }
        });
      }

      function buyImmediately()
      {
        var bc = $("#proCount").val();
        var productid = id;
        var skuid = $('#hidsku').val();
        var jiage = $(".details_jg span").attr('name');
        $.getJSON("/shop/shopmgr.ashx?skuid="+skuid+"&wid={$wid}&productid=" + productid + "&bc=" + bc + "&openid={$openid}&attr=" + "" + "&totprice=" + jiage + "&myact=addCart", function (d, status) {
          if (d.errCode == "0") {
            location.href = "/shop/confirmOrder.aspx?rtn=shop&wid={$wid}&openid={$openid}";
          }
          else {
            alert("购买失败,请联系管理员");
          }
        });
      }

      //加入购物车
      $("#addCart").click(function () {
        buyStockCheck('addCart');
      });     

      //立即购买
      $("#buyImmediately").click(function () {
        buyStockCheck('buyImmediately');
      });

      //商品图片展示
      var gallery = $('.swiper-container').swiper({
        slidesPerView: 'auto',
        centeredSlides: true,
        pagination: '.pagination',
        paginationClickable: true,
        /*resizeReInit: true,*/
        keyboardControl: true,
        grabCursor: true,
        /*loop: true,*/ //slidesPerView为auto时不支持loop模式
        autoplay: 4000//自动播放的开关及延时
      });

      var ui = {
        render: function(tpl, data) {
          var source = $(tpl).html();
          //预编译模板
          var template = Handlebars.compile(source);
          //匹配json内容
          return template(data);
        }
      };

      
      var param = {
        page: 1
      };

      function getCommentTotal(option) {
        var option = option || {};
        $.ajax({
          url: '/shop/shopmgr.ashx?myact=product_comment_total',
          type: 'get',
          dataType: 'json',
          data: {page :1,productId:id},
          success: function(res) {
            //console.log("getCommentTotal:res:"+res);
            //console.log("getCommentTotal:res.isSuccess:"+res.isSuccess);
            

            if (res.isSuccess) {
              ui.totalCount = res.data.totalCount;
              console.log("ui.totalCount:" + ui.totalCount);
              console.log("res.data:"+res.data);
              //$('#info').append(ui.render('#tpl',ui.totalCount));
              $('#commentCount').html("评价("+ ui.totalCount+")");
              /*
              $(".star").raty({
                width: 150,
                readOnly: true,
                score: function() {
                  return $(this).attr('data-score');
                }
              });
              */

              if (ui.totalCount) {
                option.success && option.success();
              }
            }
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);
          }
        });
      };

      function getCommentList() {
        $.ajax({
          url: '/shop/shopmgr.ashx?myact=product_comment_latest',
          type: 'get',
          dataType: 'json',
          data: {page :1,pagesize:3,productid:id },
          success: function(res) {
            console.log(res);
            console.log(res.data);
            if (res.isSuccess) {
              $('#list').append(ui.render('#tplComment', res.data));
              var loadMore = Math.ceil(ui.totalCount / 10) === param.page;
              $(".more").hide();
              if (!loadMore && ui.totalCount !== 0) {
                param.page++;
                $(".more").show();
              }

              $(".star-mini").raty({
                width: 100,
                readOnly: true,
                starHalf: 'mini-star-half.png',
                starOff: 'mini-star-off.png',
                starOn: 'mini-star-on.png',
                score: function() {
                  return $(this).attr('data-score');
                }
              });
            }
          }
        });
      }

      getCommentTotal({
        success: getCommentList
      });
    });
  </script>
</body>
</html>